<template>
  <div class="pc-flex pc-items-center">
    <Input v-model="start" />
    <span>-</span>
    <Input v-model="end" />
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue"
import Input from "../input"

export type ModelValueType = [number?, number?]

const model = defineModel<ModelValueType>({ default: () => [] })

const start = computed({
  get() {
    if (model.value && Array.isArray(model.value)) {
      return model.value[0]
    }
    return undefined
  },
  set(value) {
    if (model.value && Array.isArray(model.value)) {
      model.value[0] = value
    } else {
      model.value = [value, end.value]
    }
  },
})

const end = computed({
  get() {
    if (model.value && Array.isArray(model.value)) {
      return model.value[1]
    }
    return undefined
  },
  set(value) {
    if (model.value && Array.isArray(model.value)) {
      model.value[1] = value
    } else {
      model.value = [value, start.value]
    }
  },
})
</script>
